<template>
  <a-spin :spinning="loading">
    <a-space direction="vertical">
      <JFormContainer :disabled="disabled">
        <template #detail>
          <a-form v-bind="formItemLayout">
             <a-space direction="vertical">
            <a-card title="单位信息">
              <a-row>
                <a-col :span="8">
                  <a-form-item label="招标人" v-bind="validateInfos.zbr">
                    <a-input v-model:value="formData.zbr" placeholder="请输入招标人" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="招标联系人" v-bind="validateInfos.zblxr">
                    <a-input v-model:value="formData.zblxr" placeholder="请输入招标联系人" allow-clear></a-input>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item label="单位地址" v-bind="validateInfos.zbdwdz">
                    <a-input v-model:value="formData.zbdwdz" placeholder="请输入单位地址" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="联系方式" v-bind="validateInfos.zblxfs">
                    <a-input v-model:value="formData.zblxfs" placeholder="请输入联系方式" allow-clear></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card title="项目信息">
              <a-row>
                <a-col :span="8">
                  <a-form-item label="电子邮箱" v-bind="validateInfos.zbdzyx">
                    <a-input v-model:value="formData.zbdzyx" placeholder="请输入电子邮箱" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目所在区域" v-bind="validateInfos.xmszqy">
                    <j-dict-select-tag v-model:value="formData.xmszqy" dictCode="sys_kf_area" placeholder="请选择项目所在区域" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目行业分类" v-bind="validateInfos.xmhyfl">
                    <j-dict-select-tag
                      v-model:value="formData.xmhyfl"
                      dictCode="sys_industry_category"
                      placeholder="请选择项目行业分类"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目名称" v-bind="validateInfos.projectName">
                    <a-input v-model:value="formData.projectName" placeholder="请输入项目名称" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目编号" v-bind="validateInfos.projectCode">
                    <a-input v-model:value="formData.projectCode" placeholder="请输入项目编号" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="监督单位" v-bind="validateInfos.jddw">
                    <a-input v-model:value="formData.jddw" placeholder="请输入监督单位" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="重点项目" v-bind="validateInfos.zdxm">
                    <j-dict-select-tag type="radio" v-model:value="formData.zdxm" dictCode="yn" placeholder="请选择重点项目(1是0否)" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目类型" v-bind="validateInfos.xmlxdm">
                    <j-dict-select-tag v-model:value="formData.xmlxdm" dictCode="sys_project_type" placeholder="请选择项目类型" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目业主名称" v-bind="validateInfos.xmyzmc">
                    <a-input v-model:value="formData.xmyzmc" placeholder="请输入项目业主名称" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="出资比例" v-bind="validateInfos.czbl">
                    <a-input v-model:value="formData.czbl" placeholder="请输入出资比例" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目地址" v-bind="validateInfos.xmdz">
                    <a-input v-model:value="formData.xmdz" placeholder="请输入项目地址" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="投资主体" v-bind="validateInfos.tzzt">
                    <j-dict-select-tag v-model:value="formData.tzzt" dictCode="sys_investment_subject" placeholder="请选择投资主体" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="工程类别" v-bind="validateInfos.gclb">
                    <j-dict-select-tag v-model:value="formData.gclb" dictCode="sys_engineering_type" placeholder="请选择工程类别" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="价款形式" v-bind="validateInfos.jkxs">
                    <j-dict-select-tag v-model:value="formData.jkxs" dictCode="sys_price_type" placeholder="请选择价款形式" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="投资总额(万元)" v-bind="validateInfos.tzzew">
                    <a-input v-model:value="formData.tzzew" placeholder="请输入投资总额(万元)" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="本次招标投资额(万元)" v-bind="validateInfos.bczbtzew">
                    <a-input v-model:value="formData.bczbtzew" placeholder="请输入本次招标投资额(万元)" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="资金来源" v-bind="validateInfos.zjly">
                    <a-input v-model:value="formData.zjly" placeholder="请输入资金来源" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="计划立项批文号" v-bind="validateInfos.jhlxpwh">
                    <a-input v-model:value="formData.jhlxpwh" placeholder="请输入计划立项批文号" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="资金到位情况" v-bind="validateInfos.zjdwqk">
                    <a-input v-model:value="formData.zjdwqk" placeholder="请输入资金到位情况" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="审核部门名称" v-bind="validateInfos.shbmmc">
                    <a-input v-model:value="formData.shbmmc" placeholder="请输入审核部门名称" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="审核部门代码" v-bind="validateInfos.shbmdm">
                    <a-input v-model:value="formData.shbmdm" placeholder="请输入审核部门代码" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="设计单位" v-bind="validateInfos.sjdw">
                    <a-input v-model:value="formData.sjdw" placeholder="请输入设计单位" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="建设用地批文号" v-bind="validateInfos.jsydpwh">
                    <a-input v-model:value="formData.jsydpwh" placeholder="请输入建设用地批文号" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="设计文件批准书号" v-bind="validateInfos.sjwjpzsh">
                    <a-input v-model:value="formData.sjwjpzsh" placeholder="请输入设计文件批准书号" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="其他专项批准文号" v-bind="validateInfos.qtzxpzwh">
                    <a-input v-model:value="formData.qtzxpzwh" placeholder="请输入其他专项批准文号" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目规模" v-bind="validateInfos.xmgm">
                    <a-input v-model:value="formData.xmgm" placeholder="请输入项目规模" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目批文名称" v-bind="validateInfos.xmpwmc">
                    <a-input v-model:value="formData.xmpwmc" placeholder="请输入项目批文名称" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="是否固定投资项目" v-bind="validateInfos.sfgdtzxm">
                    <j-dict-select-tag
                      type="radio"
                      v-model:value="formData.sfgdtzxm"
                      dictCode="yn"
                      placeholder="请选择是否固定投资项目"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="投资项目统一代码" v-bind="validateInfos.tzxmtydm">
                    <a-input v-model:value="formData.tzxmtydm" placeholder="请输入投资项目统一代码" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="投资项目名称" v-bind="validateInfos.tzxmmc">
                    <a-input v-model:value="formData.tzxmmc" placeholder="请输入投资项目名称" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目批准单位" v-bind="validateInfos.xmpzdw">
                    <a-input v-model:value="formData.xmpzdw" placeholder="请输入项目批准单位" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="备案时间" v-bind="validateInfos.basj">
                    <a-date-picker
                      placeholder="请选择备案时间"
                      v-model:value="formData.basj"
                      value-format="YYYY-MM-DD"
                      style="width: 100%"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="受理时间" v-bind="validateInfos.slsj">
                    <a-date-picker
                      placeholder="请选择受理时间"
                      v-model:value="formData.slsj"
                      value-format="YYYY-MM-DD"
                      style="width: 100%"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="招标方式" v-bind="validateInfos.zbfs">
                    <a-radio-group v-model:value="formData.zbfs">
                      <a-radio value="1">公开招标</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="项目批准文号" v-bind="validateInfos.xmpzwh">
                    <a-input v-model:value="formData.xmpzwh" placeholder="请输入项目批准文号" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="招标组织方(1委托代理)" v-bind="validateInfos.zbzzf">
                    <a-input v-model:value="formData.zbzzf" placeholder="请输入招标组织方(1委托代理)" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="代理机构" v-bind="validateInfos.dljg">
                    <a-input v-model:value="formData.dljg" placeholder="请输入代理机构" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="代理机构负责人" v-bind="validateInfos.dljgfzr">
                    <a-input v-model:value="formData.dljgfzr" placeholder="请输入代理机构负责人" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="代理联系人" v-bind="validateInfos.dllxr">
                    <a-input v-model:value="formData.dllxr" placeholder="请输入代理联系人" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="代理联系电话" v-bind="validateInfos.dllxdh">
                    <a-input v-model:value="formData.dllxdh" placeholder="请输入代理联系电话" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="招标范围" v-bind="validateInfos.zbfw">
                    <a-textarea v-model:value="formData.zbfw" :rows="4" placeholder="请输入招标范围" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="备注" v-bind="validateInfos.zbbz">
                    <a-textarea v-model:value="formData.zbbz" :rows="4" placeholder="请输入备注" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="招标项目备案表" v-bind="validateInfos.zbxmbab">
                    <a-input v-model:value="formData.zbxmbab" placeholder="请输入招标项目备案表" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="保证金代收代退委托函" v-bind="validateInfos.bzjdsdtwth">
                    <a-input v-model:value="formData.bzjdsdtwth" placeholder="请输入保证金代收代退委托函" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="开封市公共资源交易领域'八严禁'承诺书" v-bind="validateInfos.kfsbyjcns">
                    <a-input v-model:value="formData.kfsbyjcns" placeholder="请输入开封市公共资源交易领域'八严禁'承诺书" allow-clear></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="附件" v-bind="validateInfos.attachment">
                    <j-upload v-model:value="formData.attachment"></j-upload>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="进场状态" v-bind="validateInfos.entryStatus">
                    <j-dict-select-tag
                      v-model:value="formData.entryStatus"
                      dictCode="gc_project_entry_status"
                      placeholder="请选择进场状态"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="版本号" v-bind="validateInfos.version">
                    <a-input-number v-model:value="formData.version" placeholder="请输入版本号" style="width: 100%" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
             </a-space>
          </a-form>
        </template>
      </JFormContainer>
      <a-card title="项目标段信息">
        <!-- 子表单区域 -->
        <a-tabs v-model:activeKey="activeKey" animated>
          <a-tab-pane tab="项目标段信息" key="gcProjectEntrySection" :forceRender="true">
            <j-vxe-table
              :keep-source="true"
              resizable
              ref="gcProjectEntrySectionTableRef"
              :loading="gcProjectEntrySectionTable.loading"
              :columns="gcProjectEntrySectionTable.columns"
              :dataSource="gcProjectEntrySectionTable.dataSource"
              :height="340"
              :disabled="disabled"
              :rowNumber="true"
              :rowSelection="true"
              :toolbar="true"
            />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-space>
  </a-spin>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed, toRaw, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods';
import { queryGcProjectEntrySectionListByMainId, queryDataById, saveOrUpdate } from '../GcProjectEntry.api';
import { JVxeTable } from '/@/components/jeecg/JVxeTable';
import { gcProjectEntrySectionColumns } from '../GcProjectEntry.data';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import JCheckbox from '/@/components/Form/src/jeecg/components/JCheckbox.vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;

export default defineComponent({
  name: 'GcProjectEntryForm',
  components: {
    JDictSelectTag,
    JUpload,
    JCheckbox,
    JVxeTable,
    JFormContainer,
  },
  props: {
    formDisabled: {
      type: Boolean,
      default: false,
    },
    formData: { type: Object, default: () => {} },
    formBpm: { type: Boolean, default: true },
  },
  emits: ['success'],
  setup(props, { emit }) {
    const loading = ref(false);
    const gcProjectEntrySectionTableRef = ref();
    const gcProjectEntrySectionTable = reactive<Record<string, any>>({
      loading: false,
      columns: gcProjectEntrySectionColumns,
      dataSource: [],
    });
    const activeKey = ref('gcProjectEntrySection');
    const formData = reactive<Record<string, any>>({
      id: '',
      zbr: '',
      zblxr: '',
      zbdwdz: '',
      zblxfs: '',
      zbdzyx: '',
      xmszqy: '',
      xmhyfl: '',
      projectName: '',
      projectCode: '',
      jddw: '',
      zdxm: '',
      xmlxdm: '',
      xmyzmc: '',
      czbl: '',
      xmdz: '',
      tzzt: '',
      gclb: '',
      jkxs: '',
      tzzew: '',
      bczbtzew: '',
      zjly: '',
      jhlxpwh: '',
      zjdwqk: '',
      shbmmc: '',
      shbmdm: '',
      sjdw: '',
      jsydpwh: '',
      sjwjpzsh: '',
      qtzxpzwh: '',
      xmgm: '',
      xmpwmc: '',
      sfgdtzxm: '',
      tzxmtydm: '',
      tzxmmc: '',
      xmpzdw: '',
      basj: '',
      slsj: '',
      zbfs: '',
      xmpzwh: '',
      zbzzf: '',
      dljg: '',
      dljgfzr: '',
      dllxr: '',
      dllxdh: '',
      zbfw: '',
      zbbz: '',
      zbxmbab: '',
      bzjdsdtwth: '',
      kfsbyjcns: '',
      attachment: '',
      entryStatus: '',
      version: undefined,
    });

    //表单验证
    const validatorRules = reactive({
      projectName: [{ required: true, message: '请输入项目名称!' }],
      projectCode: [{ required: true, message: '请输入项目编号!' }],
    });
    const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
    const dbData = {};
    const formItemLayout = {
      labelCol: { xs: { span: 24 }, sm: { span: 5 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
    };

    // 表单禁用
    const disabled = computed(() => {
      if (props.formBpm === true) {
        if (props.formData.disabled === false) {
          return false;
        } else {
          return true;
        }
      }
      return props.formDisabled;
    });

    function add() {
      resetFields();
      gcProjectEntrySectionTable.dataSource = [];
    }

    async function edit(row) {
      //主表数据
      await queryMainData(row.id);
      //子表数据
      const gcProjectEntrySectionDataList = await queryGcProjectEntrySectionListByMainId(row['id']);
      gcProjectEntrySectionTable.dataSource = [...gcProjectEntrySectionDataList];
    }

    async function queryMainData(id) {
      const row = await queryDataById(id);
      const tmpData = {};
      Object.keys(formData).forEach((key) => {
        if (row.hasOwnProperty(key)) {
          tmpData[key] = row[key];
        }
      });
      //赋值
      Object.assign(formData, tmpData);
    }

    const { getSubFormAndTableData, transformData } = useValidateAntFormAndTable(activeKey, {
      gcProjectEntrySection: gcProjectEntrySectionTableRef,
    });

    async function getFormData() {
      await validate();
      return transformData(toRaw(formData));
    }

    async function submitForm() {
      const mainData = await getFormData();
      const subData = await getSubFormAndTableData();
      const values = Object.assign({}, dbData, mainData, subData);
      console.log('表单提交数据', values);
      const isUpdate = values.id ? true : false;
      await saveOrUpdate(values, isUpdate);
      //关闭弹窗
      emit('success');
    }

    function setFieldsValue(values) {
      if (values) {
        Object.keys(values).map((k) => {
          formData[k] = values[k];
        });
      }
    }

    /**
     * 值改变事件触发-树控件回调
     * @param key
     * @param value
     */
    function handleFormChange(key, value) {
      formData[key] = value;
    }

    return {
      gcProjectEntrySectionTableRef,
      gcProjectEntrySectionTable,
      validatorRules,
      validateInfos,
      activeKey,
      loading,
      formData,
      setFieldsValue,
      handleFormChange,
      formItemLayout,
      disabled,
      getFormData,
      submitForm,
      add,
      edit,
    };
  },
});
</script>
<style lang="less" scoped></style>
